{% extends "base.html" %}

{% block title %}分子标记分析{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>分子标记分析</h2>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAnalysisModal">
            <i class="fas fa-plus"></i> 添加分析
        </button>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
            </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="card">
        <div class="card-body">
            <table class="table table-striped" id="analysisTable">
                <thead>
                    <tr>
                        <th>样品编号</th>
                        <th>Pina基因型</th>
                        <th>Pinb基因型</th>
                        <th>籽粒硬度</th>
                        <th>分析日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for analysis in analyses %}
                    <tr>
                        <td>{{ analysis.sample.sample_id }}</td>
                        <td>{{ analysis.pina_type }}</td>
                        <td>{{ analysis.pinb_type }}</td>
                        <td>
                            {% if analysis.grain_hardness == 'soft' %}
                            <span class="badge bg-success">软质</span>
                            {% elif analysis.grain_hardness == 'medium' %}
                            <span class="badge bg-warning">中等</span>
                            {% elif analysis.grain_hardness == 'hard' %}
                            <span class="badge bg-danger">硬质</span>
                            {% else %}
                            <span class="badge bg-secondary">未知</span>
                            {% endif %}
                        </td>
                        <td>{{ analysis.analysis_date.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            <button class="btn btn-sm btn-info view-analysis" 
                                    data-id="{{ analysis.id }}"
                                    data-sample-id="{{ analysis.sample.sample_id }}"
                                    data-sequence="{{ analysis.sequence_data }}"
                                    data-notes="{{ analysis.notes }}">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-warning edit-analysis" 
                                    data-id="{{ analysis.id }}"
                                    data-sample-id="{{ analysis.sample_id }}"
                                    data-pina-type="{{ analysis.pina_type }}"
                                    data-pinb-type="{{ analysis.pinb_type }}"
                                    data-sequence="{{ analysis.sequence_data }}"
                                    data-notes="{{ analysis.notes }}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger delete-analysis" data-id="{{ analysis.id }}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加分析模态框 -->
<div class="modal fade" id="addAnalysisModal" tabindex="-1" aria-labelledby="addAnalysisModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAnalysisModalLabel">添加分析</h5>
                <button type="button" class="btn-close" aria-label="关闭"></button>
            </div>
            <form id="addAnalysisForm" action="{{ url_for('analysis.add') }}" method="post">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="sample_id" class="form-label">选择样品</label>
                        <select class="form-select" id="sample_id" name="sample_id" required>
                            <option value="">请选择样品</option>
                            {% for sample in samples %}
                            <option value="{{ sample.id }}">{{ sample.sample_id }} - {{ sample.variety_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="pina_type" class="form-label">Pina基因型</label>
                            <select class="form-select" id="pina_type" name="pina_type" required>
                                <option value="wild">野生型</option>
                                <option value="mutation">突变型</option>
                                <option value="null">缺失型</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="pinb_type" class="form-label">Pinb基因型</label>
                            <select class="form-select" id="pinb_type" name="pinb_type" required>
                                <option value="wild">野生型</option>
                                <option value="mutation">突变型</option>
                                <option value="null">缺失型</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="sequence_data" class="form-label">序列数据</label>
                        <textarea class="form-control" id="sequence_data" name="sequence_data" rows="4"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">备注</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancelAddBtn">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑分析模态框 -->
<div class="modal fade" id="editAnalysisModal" tabindex="-1" aria-labelledby="editAnalysisModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editAnalysisModalLabel">编辑分析</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <form id="editAnalysisForm" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_pina_type" class="form-label">Pina基因型</label>
                            <select class="form-select" id="edit_pina_type" name="pina_type" required>
                                <option value="wild">野生型</option>
                                <option value="mutation">突变型</option>
                                <option value="null">缺失型</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_pinb_type" class="form-label">Pinb基因型</label>
                            <select class="form-select" id="edit_pinb_type" name="pinb_type" required>
                                <option value="wild">野生型</option>
                                <option value="mutation">突变型</option>
                                <option value="null">缺失型</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="edit_sequence_data" class="form-label">序列数据</label>
                        <textarea class="form-control" id="edit_sequence_data" name="sequence_data" rows="4"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="edit_notes" class="form-label">备注</label>
                        <textarea class="form-control" id="edit_notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancelEditBtn">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 查看分析模态框 -->
<div class="modal fade" id="viewAnalysisModal" tabindex="-1" aria-labelledby="viewAnalysisModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewAnalysisModalLabel">查看分析详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <h6>样品编号：<span id="view_sample_id"></span></h6>
                <hr>
                <h6>序列数据：</h6>
                <pre id="view_sequence_data" class="bg-light p-3 rounded"></pre>
                <h6>备注：</h6>
                <p id="view_notes" class="text-muted"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteAnalysisModal" tabindex="-1" aria-labelledby="deleteAnalysisModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteAnalysisModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                确定要删除这条分析记录吗？此操作不可恢复。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelDeleteBtn">取消</button>
                <form id="deleteAnalysisForm" method="post" style="display: inline;">
                    <button type="submit" class="btn btn-danger">删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 初始化DataTables
    $('#analysisTable').DataTable({
        language: {
            url: "{{ url_for('static', filename='js/zh.json') }}"
        },
        order: [[4, 'desc']] // 按分析日期降序排序
    });

    // 初始化所有模态框
    const addModal = new bootstrap.Modal(document.getElementById('addAnalysisModal'));
    const editModal = new bootstrap.Modal(document.getElementById('editAnalysisModal'));
    const viewModal = new bootstrap.Modal(document.getElementById('viewAnalysisModal'));
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteAnalysisModal'));

    // 添加分析
    $('.btn-primary[data-bs-toggle="modal"]').click(function() {
        $('#addAnalysisForm').trigger('reset');
        addModal.show();
    });

    // 查看分析
    $('.view-analysis').click(function() {
        const sampleId = $(this).data('sample-id');
        const sequence = $(this).data('sequence');
        const notes = $(this).data('notes');

        $('#view_sample_id').text(sampleId);
        $('#view_sequence_data').text(sequence || '无序列数据');
        $('#view_notes').text(notes || '无备注');
        
        viewModal.show();
    });

    // 编辑分析
    $('.edit-analysis').click(function() {
        const id = $(this).data('id');
        const pinaType = $(this).data('pina-type');
        const pinbType = $(this).data('pinb-type');
        const sequence = $(this).data('sequence');
        const notes = $(this).data('notes');

        $('#edit_pina_type').val(pinaType);
        $('#edit_pinb_type').val(pinbType);
        $('#edit_sequence_data').val(sequence);
        $('#edit_notes').val(notes);
        
        $('#editAnalysisForm').attr('action', `/analysis/edit/${id}`);
        editModal.show();
    });

    // 删除分析
    $('.delete-analysis').click(function() {
        const id = $(this).data('id');
        $('#deleteAnalysisForm').attr('action', `/analysis/delete/${id}`);
        deleteModal.show();
    });

    // 取消按钮事件处理
    $('#cancelAddBtn').click(function() {
        addModal.hide();
    });

    $('#cancelEditBtn').click(function() {
        editModal.hide();
    });

    $('#cancelDeleteBtn').click(function() {
        deleteModal.hide();
    });

    // 表单验证
    function validateForm(form) {
        const sampleId = form.find('[name="sample_id"]').val();
        const pinaType = form.find('[name="pina_type"]').val();
        const pinbType = form.find('[name="pinb_type"]').val();

        if (!sampleId) {
            alert('请选择样品');
            return false;
        }

        if (!pinaType) {
            alert('请选择Pina基因型');
            return false;
        }

        if (!pinbType) {
            alert('请选择Pinb基因型');
            return false;
        }

        return true;
    }

    // 添加表单验证
    $('#addAnalysisForm').on('submit', function(e) {
        e.preventDefault();
        if (validateForm($(this))) {
            this.submit();
        }
    });

    // 编辑表单验证
    $('#editAnalysisForm').on('submit', function(e) {
        e.preventDefault();
        if (validateForm($(this))) {
            this.submit();
        }
    });

    // 模态框关闭时重置表单
    $('#addAnalysisModal').on('hidden.bs.modal', function () {
        $('#addAnalysisForm').trigger('reset');
    });

    $('#editAnalysisModal').on('hidden.bs.modal', function () {
        $('#editAnalysisForm').trigger('reset');
    });

    // 关闭按钮事件处理（右上角的 × 按钮）
    $('#addAnalysisModal .btn-close').click(function() {
        addModal.hide();
    });

    // 点击模态框外部时关闭
    $('#addAnalysisModal').click(function(e) {
        if (e.target === this) {
            addModal.hide();
        }
    });
});
</script>
{% endblock %} 